<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JS DOM 操作演示</title>
    <style>
        .highlight {
            background-color: yellow;
            border: 1px solid red;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 10px;
            display: inline-block;
        }

        .new-class {
            font-weight: bold;
            color: green;
        }
    </style>
</head>
<body>
<h1 id="main-title">DOM 操作演示</h1>

<div id="container">
    <p class="content">这是一个段落</p>
    <ul id="list">
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
    <a href="#" id="link">测试链接</a>
    <div class="box"></div>
    <div class="box"></div>
</div>

<button id="btn-add">添加元素</button>
<button id="btn-remove">移除元素</button>
<button id="btn-modify">修改元素</button>
<button id="btn-style">修改样式</button>
<button id="btn-traverse">遍历元素</button>
<button id="btn-append">追加元素</button>

<script>
    // ====================== 1. 获取DOM元素 ======================
    // 通过ID获取标题元素
    const title = document.getElementById('main-title');


    // 通过CSS类选择器获取第一个匹配的段落元素
    const content = document.querySelector('.content');
    // 获取所有class为box的元素（返回NodeList）
    const boxes = document.querySelectorAll('.box');
    // 通过ID获取列表元素
    const list = document.getElementById('list');

    // console.log('获取的元素:', title, content, boxes, list);


    // ====================== 2. 修改元素内容 ======================
    // 修改标题的纯文本内容（自动转义HTML标签）
    title.textContent = '修改后的标题';
    // 修改段落的HTML内容（可以解析HTML标签）
    content.innerHTML = '<strong>加粗的</strong>段落内容';


    // ====================== 3. 修改元素属性 ======================
    // 获取链接元素
    const link = document.getElementById('link');
    // 设置链接的href属性
    link.setAttribute('href', 'https://www.example.com');
    // 修改链接显示的文本
    link.textContent = '前往示例网站';


    // ====================== 4. 添加/移除CSS类 ======================
    // 为标题添加高亮类
    title.classList.add('highlight');
    // 2秒后移除高亮类（演示动态效果）
    setTimeout(() => {
        title.classList.remove('highlight');
    }, 2000);


    // ====================== 5. 事件处理 ======================
    // 添加按钮点击事件 - 添加列表项
    document.getElementById('btn-add').addEventListener('click', function () {
        // 创建新的li元素
        const newItem = document.createElement('li');
        // 设置新元素的文本内容（显示当前列表项数量+1）
        newItem.textContent = '新添加的列表项 ' + (list.children.length + 1);
        // 将新元素追加到列表末尾
        list.appendChild(newItem);
    });

    // 移除按钮点击事件 - 删除最后一项
    document.getElementById('btn-remove').addEventListener('click', function () {
        // 检查列表是否有子元素
        if (list.children.length > 0) {
            // 移除最后一个子元素
            list.removeChild(list.lastElementChild);
        }
    });

    // 修改按钮点击事件 - 修改所有列表项文本
    document.getElementById('btn-modify').addEventListener('click', function () {
        // 获取列表中的所有li元素
        const items = list.querySelectorAll('li');
        // 遍历每个列表项（参数：当前元素，索引）
        items.forEach((item, index) => {
            // 修改每一项的文本内容
            item.textContent = `修改后的项 ${index + 1}`;
        });
    });

    // 样式按钮点击事件 - 修改所有box元素的样式
    document.getElementById('btn-style').addEventListener('click', function () {
        // 遍历每个box元素
        boxes.forEach(box => {
            // 修改背景颜色
            box.style.backgroundColor = '#e74c3c';
            // 添加圆角边框
            box.style.borderRadius = '50%';
        });
    });

    // 遍历按钮点击事件 - 演示DOM节点关系
    document.getElementById('btn-traverse').addEventListener('click', function () {
        console.log('--- 遍历DOM树 ---');

        // 获取list的父节点
        console.log('list的父节点:', list.parentNode);
        // 获取list的所有子元素（HTMLCollection）
        console.log('list的子节点:', list.children);

        // 获取container元素
        const container = document.getElementById('container');
        // 获取container的第一个子元素
        console.log('container的第一个子节点:', container.firstElementChild);
        // 获取container的最后一个子元素
        console.log('container的最后一个子节点:', container.lastElementChild);
    });


    // 添加按钮点击事件 - 追加列表项
    document.getElementById('btn-append').addEventListener('click', function () {
        // 创建新的li元素
        const newItem = document.createElement('li');

        const input = document.getElementById('item_name');
        const value = input.value; // 获取当前值


        // 设置新元素的文本内容（显示当前列表项数量+1）
        newItem.textContent = '新追加的列表项：' + value + "：" + (list.children.length + 1);
        // 将新元素追加到列表末尾
        list.appendChild(newItem);
    });


    // ====================== 6. 创建并插入新元素 ======================
    // 创建一个新的div元素
    const newDiv = document.createElement('div');
    // 设置div的文本内容
    newDiv.textContent = '动态创建的元素';
    // 为div添加CSS类
    newDiv.className = 'new-class';
    // 将div添加到body的末尾
    document.body.appendChild(newDiv);


    // ====================== 7. 操作表单元素 ======================
    // 创建一个input元素
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = '输入内容...';
    input.id = 'item_name'


    // 将input添加到body的末尾
    document.body.appendChild(input);


    // ====================== 8. 事件委托 ======================
    // 为列表添加点击事件委托（利用事件冒泡机制）
    list.addEventListener('click', function (e) {
        // 检查实际点击的目标元素是否是LI
        if (e.target.tagName === 'LI') {
            // 切换高亮类（存在则移除，不存在则添加）
            e.target.classList.toggle('highlight');
        }
    });

</script>
</body>
</html>
